<template>
  <el-drawer title="上传列表" :visible.sync="drawer">
    <div >
      <el-upload class="upload-content" :drag="drag" action="" multiple :limit="20" :file-list="fileList" :http-request="uploadSectionFile">
        <i class="el-icon-upload" v-if="drag"></i>
        <div class="el-upload__text" v-if="drag">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-empty v-if="noData"  description="暂无上传文件"></el-empty>
    </div>
  </el-drawer>
</template>

<script>
import filebase from "@/apis/filebase";
import { event } from "@ice/stark-data";
export default {
  props: {
    value: Boolean,
    showUpload: Boolean,
  },
  data() {
    return {
      drag: false,
      drawer: false,
      fileList: [],
      namespace: "",
      parentId: "",
      noData: false,
    };
  },
  watch: {
    value(val) {
      this.drawer = val;
    },
    drawer(val) {
      this.$emit("input", val);
    },
    showUpload(val){
        this.drag = val
    },
    drag(val){
        this.$emit("update:showUpload",val)
    }
  },
  mounted() {
    event.on("oarsUpload", (namespace, parentId) => {
      this.drag = true
      this.drawer = true
      this.namespace = namespace
      this.parentId = parentId
    });
    this.drawer = this.value;
  },
  methods: {
       uploadSectionFile(params){
            let file = params.file;
            let onProgress = function(file){
                params.onProgress(file)
            }
            filebase.upload(file,onProgress,this.namespace,this.parentId).then((res) => {
                params.onSuccess(res);
                event.emit("oarsUploadComplete")
            }).catch((e) => {
                params.onError(e);
            });
        }
  },
};
</script>

<style lang="scss" scoped>
.upload-content {
  margin: 0 auto;
  width: 360px;
}
</style>